{include file="public/header" /}
<section>
<section class="main-content-wrapper">
    <section id="main-content">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">留言管理</h3>
                </div>
                <div class="panel-body1">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>内容</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="lists" id="vo"}
                            <tr id="list_{$vo.id}">
                            <td scope="row">{$vo.id}</td>
                            <td>{$vo.name}</td>
                            <td>{$vo.phone}</td>
                            <td>{$vo.message}</td>
                            <td>{$vo.time|date="Y-m-d H:i:s",###}</td>
                            <td><button type="button" class="btn btn-xs btn-default" onclick="operation('view',{$vo.id})">查看</button> &nbsp; <button type="button" class="btn btn-xs btn-default" onclick="operation('delete',{$vo.id})" >删除</button></td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                    {$lists->render()}
                </div>
            </div>
        </div>
    </div>
    </section>
</section>
</section>
<style>
    .panel-body1 th,.panel-body1 td{text-align: center;}
    .w_loading{
        position:relative;
        animation:mymove 2s infinite;
         -webkit-animation:mymove 2s infinite; /*Safari and Chrome*/
    }
    @keyframes mymove {
        from {left:0px;}
        to {left:100px;}
    }
    @-webkit-keyframes mymove{ /*Safari and Chrome*/
        from {left:0px;}
        to {left:100px;}
    }
    @media screen and (max-width: 500px) {
        .w_bootstrap_hide th:nth-child(1),.w_bootstrap_hide td:nth-child(1){display: none;}
        .w_bootstrap_hide th:nth-child(4),.w_bootstrap_hide td:nth-child(4){display: none;}
    }
</style>
<!--以下为bootstrap model弹窗-->
<div class="modal fade" id="message_info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 class="modal-title">留言详情</h2>
            </div>
            <div class="modal-body"><!--效果很low，望大神改进-->
                <div class="w_loading">走心的加载中...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 class="modal-title">是否删除？</h2>
            </div>
            <div class="modal-footer" style="border-top:none;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary w_delete">删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script>
    function operation(type,id){
        if(type=='delete'){
            $('.w_delete').attr('data-id',id);
            $("#delete").modal('show');
        }
        if(type=='view'){
            $("#message_info").modal('show');
            $.ajax({
                type: "GET",  //提交方式
                url: "/admin/message/message_detail",//路径
                data: {'id':id},
                dataType: "json",
                success: function (data) {
                    var htmls = '';
                    if(data.status==0){
                        var data = data.data;
                        if(data.name!=null){
                            htmls += '<h4>姓名：'+data.name+'</h4>';
                        }
                        if(data.phone!=null){
                            htmls += '<h4>手机号：'+data.phone+'</h4>';
                        }
                        if(data.weixin!=null){
                            htmls += '<h4>微信：'+data.weixin+'</h4>';
                        }
                        if(data.qq!=null){
                            htmls += '<h4>QQ：'+data.qq+'</h4>';
                        }
                        if(data.time!=null){
                            htmls += '<h4>留言时间：'+data.time+'</h4>';
                        }
                        if(data.message!=null){
                            htmls += '<hr><h4>留言内容：'+data.message+'</h4>';
                        }
                    }
                    if(data.status==1){
                        htmls = '暂无该条数据详情!';
                    }
                    if(data.status==2){
                        htmls = '系统错误，请刷新页面!';
                    }
                    $(".modal-body").html(htmls);

                }
            });
        }
    }
    $(document).on('click','.w_delete',function(){
        $(this).text('删除中');
        var id = $(this).attr('data-id');
        if(id <= 0){
            $('.w_delete').text('删除');
            alert('该条数据不存在!');
            $('#delete').modal('hide');
        }else{
            $.ajax({
                type: "GET",  //提交方式
                url: "/admin/message/message_delete",//路径
                data: {'id':id},
                dataType: "json",
                success: function (data) {
                    if(data.status==0){
                        $('#list_'+id).remove();
                    }
                    if(data.status==2){
                        alert('系统错误，请刷新页面!');
                    }
                    if(data.status==3){
                        alert('删除失败!');
                    }
                    $('.w_delete').text('删除');
                    $('#delete').modal('hide');
                }
            });

        }
    });
</script>
</body>
</html>
